<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <title>表格</title>
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all"/>

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
    <fieldset class="table-search-fieldset">
        <legend>搜索条件</legend>
        <div style="margin: 10px auto">
            <form class="layui-form layui-form-pane"action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                    <div class="layui-form-label">姓名</div>
                        <div class="layui-input-inline">
                            <input type="text" name="username" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div class="layui-form-label">手机号</div>
                        <div class="layui-input-inline">
                            <input type="phone" name="phone" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-form-label">身份</div>
                        <div class="layui-input-inline">
                            <input type="nickname" name="nickname" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-form-label">邮箱</div>
                        <div class="layui-input-inline">
                            <input type="email" name="email" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="search-btn"><i class="layui-icon layui-icon-search"></i> 搜 索</button>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>

    <table class="layui-table" id="user-tab" lay-filter="currentTableFilter" lay-data="{height:300,url:'/sysuser',limit:2,page:true,request:{limitName:'rows'},toolbar:'#toolbarDemo'}">
    <thead>
    <tr>
        <th lay-data="{field:'id',sort:true,width:100}">编号</th>
        <th lay-data="{field:'username',width:200}">姓名</th>
        <th lay-data="{field:'nickname',width:200}">身份</th>
        <th lay-data="{field:'phone',width:200}">手机号</th>
        <th lay-data="{field:'nickname',width:200}">身份</th>
        <th lay-data="{field:'email' ,width:200}">邮箱</th>
        <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作</th>
    </tr>
    </thead>
    </table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            <a class="layui-btn layui-btn-xs layui-btn " lay-event="updateRole">角色编辑</a>
        </script>
    </div>
</div>
<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['form','table','layer'],function() {
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        form.on('submit(search-btn)', function (data) {
            table.reload('user-tab',{
                where:  data.field,
                page:{curr:1},
                request:{limitName:'rows',pageName:'page'}

            })
            return false;//组织表单提交
        });
        table.on('tool(currentTableFilter)',function (msg) {
            var $=layui.jquery;
            var data=msg.data;
            var layevent=msg.event;
            if(layevent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    msg.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        type: "delete",
                        url:"/sysusers/sysuser/"+data.id,
                        success: function(msg){
                            table.reload("user-tab");
                        }
                    });
                });
            }
            else if(layevent === 'edit'){ //编辑
                layui.sessionData('user/edit.html',{key:'user-id', value:data});//将当前行的id存储到本地session中
                layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '../user/edit.html'

                });
            }
            else  if (layevent==='updateRole'){
               //  layui.sessionData('user/2.html',{key:'user-id', value:data});//将当前行的id存储到本地session中
                layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: '../user/2.html?id='+data.id

                });
            }
        });


    })
</script>
</body>

</html>